<template>
  <div class="card-image">
    <img src="../../../static/blog-img/1.jpg" alt="">
    <div class="news-item-image-content">
      news-item-image-content
    </div>
  </div>
</template>

<script>
export default {
  name: 'card-image'
}
</script>

<style scoped lang="less">
  .card-image{
    position: relative;
    height: 100%;
    img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .news-item-image-content{
      position: absolute;
      width: 226px;
      height: 156px;
      left: 50%;
      top: 50%;
      margin-left: -113px;
      margin-top: -78px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: #000000;
      z-index: 10;
      color: #ffffff;
    }
    .news-item-image-content:hover {
      background-color: #30336b;
      color: #ffffff;
      border-color: #30336b;
      transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
  }
</style>
